<template>
  <div class="school-overview">
    <div class="container">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in props.schoolList"
          :key="index"
          @click="gotoSchoolDetail(item)"
        >
          <div class="school-item">
            <img class="pic" :src="item.image" alt="" />
            <div class="info">
              <div class="left">
                <img class="logo" :src="item.schoolLogo" alt="" />
              </div>
              <div class="right">
                <div class="top">{{ item.schoolName }}</div>
                <div class="middle">
                  {{ item.cityName }} / {{ item.schoolTags[0] }} /
                  {{ item.schoolTags[1] }} / {{ item.natureName }} /
                  {{ item.tagName }}
                </div>
                <div class="bottom">
                  <div
                    class="bottom-item"
                    v-for="(_item, _index) in item.dualClassName
                      .split(',')
                      .slice(0, 3)"
                    :key="_index"
                  >
                    {{ _item }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-swipe-item>
        <template #indicator="{}">
          <div class="custom-indicator"></div>
        </template>
      </van-swipe>
    </div>
  </div>
</template>

<script setup>
import { watch, ref } from "vue";
import { useRouter } from "vue-router"; // 导入路由
const router = useRouter();

const props = defineProps({
  schoolList: {
    type: Array,
    default: () => [],
  },
});
const gotoSchoolDetail = (item) => {
  router.push({
    name: "SchoolDetail",
    query: {
      dataId: item.collegeId,
      dataName: item.schoolName,
    },
  });
};

// 监听 schoolList 的变化
watch(
  () => props.schoolList,
  (newList, oldList) => {
    // 移除手动调用 autoplay 方法的代码
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.school-overview {
  width: 686px;
  border-radius: 42px;
  border: 2px solid transparent;
  background-image: linear-gradient(#f7fafa, #f7fafa),
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(206, 231, 245, 1));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  backdrop-filter: blur(24px);
  position: relative;
  padding: 24px;
  box-sizing: border-box;
  .container {
    .my-swipe .van-swipe-item {
      color: black;
      font-size: 20px;
      background-color: #f7fafa;
      .school-item {
        border-radius: 24px;
        .pic {
          width: 638px;
          height: 343px;
          border-radius: 24px;
        }
        .info {
          padding-left: 17px;
          margin-top: 40px;
          margin-bottom: 4px;
          display: flex;
          gap: 22px;
          align-items: center;
          .left {
            .logo {
              width: 96px;
              height: 96px;
              border-radius: 50%;
            }
          }
          .right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .top {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 32px;
              color: #333333;
              margin-bottom: 4px;
            }
            .middle {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 20px;
              color: #666666;
              margin-bottom: 10px;
            }
            .bottom {
              display: flex;
              gap: 8px;
              .bottom-item {
                padding: 3px 10px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                background: #f0f0f0;
                border-radius: 6px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
